<template>
    <div>
        <div class="back-img">
            <div class="top-nav"><topHeade></topHeade></div>
        </div>
        <div class="first-box">
                <div class="title">
                    <div class="box1" @click="isClick1" ref="dom3">
                        <h3>项目展示</h3>
                        <p class="title-p">Project display</p>
                    </div>
                    <div class="box2" @click="isClick2" ref="dom4">
                        <h3>新闻动态</h3>
                        <p class="title-p">News information</p>
                    </div>
                </div>
            <div class="content">
                <div class="content1" ref="dom1">
                    <div  v-loading="loading4" class="loading" v-if="loadingShow"></div>
                    <router-link :to="{path:'/detail',query:{id1:item.id,index:2,title:3}}" tag="div" class="calendar" v-for="(item,index) in calendarData" :key="index">
                        <div class="calendar-img"><img :src="`http://www.shangyuninfo.com/api/profile/product/${item.route}`" alt=""></div>
                        <div class="title-box">
                            <h4>{{item.name}}</h4>
                            <p class="bottom-p">{{item.descri}}</p>
                        </div>
                    </router-link>
                </div>
                <div class="content2" ref="dom2">
                   <div class="content2-box">
                       <div  v-loading="loading5" class="loading" v-if="loadingShow"></div>
                       <router-link :to="{path:'/detail',query:{id:item.id,index:2,title:3}}" tag="div" class="calendar1" v-for="(item,index) in newsData" :key="index">
                           <div class="calendar-img new-img"><img :src="`http://www.shangyuninfo.com/api/profile/product/${item.route}`" alt=""></div>
                           <div class="title-box2 title-box">
                               <h4>{{item.name}}</h4>
                           </div>
                       </router-link>
                   </div>
                </div>
            </div>
        </div>
        <div class="foot"><bottomFoot></bottomFoot></div>
    </div>
</template>

<script>
    import bottomFoot from "../../components/bottomFoot";
    import indexMinxin from "../../mixin";
    import {getLaboratoryList, getLaboratoryNews} from "../../api";

    export default {
        name: "laboratory",
        components:{
            bottomFoot
        },
        mixins:[indexMinxin],
        data(){
            return{
                calendarData:"",
                newsData:"",
                loading4:true,
                loading5:true,
                loadingShow:true
            }
        },
        created() {
            this.modifyIndex(2)
            getLaboratoryList().then(res=>{
                this.loadingShow=false
                this.loading4=false
                // console.log(res.rows)
                this.calendarData=res.rows
            })
            getLaboratoryNews ().then(res=>{
                this.loadingShow=false
                this.loading5=false
                // console.log(res.rows)
                this.newsData=res.rows
            })
        },
        methods:{
            isClick1(){
                this.$refs.dom1.style.display='block'
                this.$refs.dom2.style.display='none'
                this.$refs.dom3.style.color='#71cfff'
                this.$refs.dom4.style.color='black'
            },
            isClick2(){
                this.$refs.dom2.style.display='block'
                this.$refs.dom1.style.display='none'
                this.$refs.dom4.style.color='#71cfff'
                this.$refs.dom3.style.color='black'
            }
        },
    }
</script>

<style scoped lang="less">
    .top-nav{
        background: black;
    }
    .back-img{
        height: 854px;
        background-image: url("../../assets/laboratory/laboratory-banner.png");
        background-position: center;
        background-repeat: no-repeat;
    }
    .first-box{
        width: 1200px;
        /*height: 500px;*/
        margin: auto;
        /*border: 1px solid red;*/
        .title-p{
            text-align: center;
            font-size: 22px;
            font-weight: 500;
            margin: 10px 0;
        }
        h3{
            text-align: center;
        }
    }
    .title-box{
        width: 278px;
        text-align: center;
    }
    .title{
        width: 400px;
        margin: 40px auto;
        display: flex;
        .box1{
            width: 200px;
            color: #71cfff;
        }
        .box2{
            width: 200px;
        }
    }
    .content{
        overflow: hidden;
    }
    .content1{
        float: left;
        /*height: 200px;*/
        width: 100%;
        /*border: 1px solid firebrick;*/
    }
    .content2{
        display: none;
        float: left;
        margin-bottom: 30px;
        /*height: 200px;*/
        width: 100%;
        /*border: 1px solid firebrick;*/
    }
    .bottom-p{
        text-align: left;
        margin-top: 15px;
        font-size: 13px;
        color: #666;
        width: 277px;
        height: 53px;
        display: -webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .title-box{
        padding: 10px 0 !important;
    }
    .title-box:hover{
        border: 1px solid #dddddd;
        border-top: 0;
        /*box-shadow: 2px 0px 1px gray;*/
    }
    .calendar{
        width: 297px;
        height: 316px;
    }
    .calendar-img{
        overflow: hidden;
        width: 276px;
        height: 176px;
    }
    .calendar-img>img:hover{
        transition: 0.5s;
        transform: scale(1.1,1.1);
    }
    .new-img>img{
        width: 100%;
        height: 100%;
    }
    .title-box2{
        padding: 10px 0 !important;
        width: 276px;
    }
    .content2-box{
        display: flex;
    }
    .calendar-box{
        margin: 0 20px;
    }
    .calendar1{
        width: 297px;
        height: 277px;
    }
    .top-nav{
        width: 100%;
        position: fixed;
        top: 0;
        z-index: 1000;
    }
    .loading{
        height: 10px;
        margin-top: 20px;
    }
</style>